<!-- 团购管理 -->
<template>
	<div>
		<div class="date-box flex flexC">
			<div class="date-icon">
				<img src="@/assets/center/date.png" alt="" />
			</div>
			<div class="f1 tuan">
				<nut-input
					style="
						width: 100%;
						padding-left: 0 !important;
						padding-right: 0 !important;
						text-align: center !important;
						color: #52bf49;
					"
					readonly
					placeholder="开始日期"
					v-model="fromData.start_time as any"
					@click-input="handlInput(1)"
				/>
			</div>
			<div class="txt">至</div>
			<div class="f1 tuan">
				<nut-input
					style="
						width: 100%;
						padding-left: 0 !important;
						padding-right: 0 !important;
						text-align: center !important;
						color: #52bf49;
					"
					readonly
					placeholder="结束日期"
					v-model="fromData.end_time"
					@click-input="handlInput(2)"
				/>
			</div>
			<div @click="handleColse">
				<nut-icon
					name="circle-close"
					style="color: #52bf49"
					v-if="fromData.start_time || fromData.end_time"
				></nut-icon>
			</div>
		</div>
		<nut-datepicker
			v-model:visible="show1"
			type="date"
			:min-date="minDate"
			:max-date="maxDate"
			v-model="currentDate"
			@confirm="confirmStart"
		></nut-datepicker>
		<nut-datepicker
			v-model:visible="show2"
			v-model="currentDate"
			type="date"
			:min-date="minDate"
			:max-date="maxDate"
			@confirm="confirmEnd"
		></nut-datepicker>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
const show1 = ref<boolean>(false)
const show2 = ref<boolean>(false)
const minDate = new Date(1900, 1, 1)
const maxDate = new Date(2099, 12, 1)
const currentDate = new Date()
const fromData = reactive({
	start_time: '',
	end_time: ''
})
const handlInput = (n: number) => {
	if (n == 1) {
		show1.value = true
		return
	}
	if (n == 2) {
		show2.value = true
		return
	}
}
//注册事件
const emits = defineEmits(['save'])
const confirmStart = ({ selectedValue, selectedOptions }: any) => {
	fromData.start_time = selectedValue.join('-')
	fromData.end_time = selectedValue.join('-')
	emits('save', fromData)
}
const confirmEnd = ({ selectedValue, selectedOptions }: any) => {
	fromData.end_time = selectedValue.join('-')
	emits('save', fromData)
}
const handleColse = () => {
	fromData.start_time = ''
	fromData.end_time = ''
	emits('save', fromData)
}
</script>
<style scoped lang="scss">
.date-box {
	margin: 20px 30px;
	padding: 0px 30px;
	height: 100px;
	background: #ffffff;
	border-radius: 30px;
	border: 2px solid #40ae36;

	.txt {
		width: 40px;
		font-size: 28px;
		color: #999;
	}
}
.date-icon {
	width: 36px;
	height: 36px;
	img {
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>
